<template>
	<view class="second-class dir-left-nowrap">
		<view class="spring-board" v-if="switchBool">
			<view class="ollapse main-right" @click="switchBool = false">
				<image src="./image/ollapse.png" class="ollapse-icon"></image>
			</view>
			<view class="ollapse-view">
				<text class="item" :class="acvitiveall ? 'active ' + theme+ '-m-text ' + theme : ''"
					@click="setAllNav()">
					全部
				</text>
				<text class="item" v-for="(it, key) in list" :key="key"
					:class="key === activeIndexTwo && !acvitiveall ? 'active ' + theme+ '-m-text ' + theme : ''"
					@click="setNav(it, key)">
					{{it.name}}
				</text>
			</view>
		</view>
		<scroll-view :scroll-into-view="'cur-'+cur" scroll-x v-if="!switchBool" class="left dir-left-nowrap">
			<view>
				<text :id="'cur-0'" class="item" :class="acvitiveall ? 'active ' + theme+ '-m-text ' + theme : ''"
					@click="setAllNav()">
					全部
				</text>
				<text class="item " v-for="(it, key) in list" :key="key" :id="'cur-'+(key+1)"
					:class="key === activeIndexTwo && !acvitiveall ? 'active ' + theme+ '-m-text ' + theme : ''"
					@click="setNav(it, key)">
					{{it.name}}
				</text>
			</view>
		</scroll-view>
		<view class="right" v-if="!switchBool" @click="switchBool = true">
			<image src="./image/expand.png" class="icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "second-class",

		props: ['list', `activeIndexTwo`, `theme`, 'acvitiveall'],

		data() {
			return {
				switchBool: false,
				// cur: -1
			}
		},
		computed: {
			cur(c, r) {
				console.log(c, r, 'cuer-');
				if (this.acvitiveall) {
					return 0
				} else {
					return (this.activeIndexTwo + 1)
				}
			}
		},
		/* computed:{
			cur(c,r){
				if(this.acvitiveall){
					return -1
				}else{
					
				}
				console.log(c,r);
			}
		}, */
		methods: {
			setAllNav() {
				console.log('setAllBac');
				this.$emit('setAllNav');
			},
			setNav(it, key) {
				this.$emit('setNav', it, key);
			}
		}
	}
</script>

<style scoped lang="scss">
	.second-class {
		position: relative;
		height: #{106upx};
		width: #{528upx};
		// color: #09ba07;
		// background-color: rgba(9, 186, 7, .2);
		// border-bottom: 1rpx solid #cccccc;
		position: fixed;
		top: 88rpx;
		right: 0;
		background: #fff;
		z-index: 1;
	}

	.left {
		width: #{448upx};
		white-space: nowrap;
		vertical-align: center;
		// background-color: #ffffff;
		line-height: #{106upx};
		border-bottom: 1rpx solid #cccccc;
	}

	.right {
		width: #{80upx};
		height: #{106upx};
		position: relative;
		// box-shadow: #{-1upx 0 5upx -5upx} rgba(0, 0, 0, .2);
		box-shadow: -1rpx 0 15rpx -5rpx rgba(0, 0, 0, 0.2);
	}

	.item {
		display: inline-block;
		font-size: #{24upx};
		height: #{54upx};
		line-height: #{54upx};
		padding: #{0 20upx};
		border: #{1upx} solid #cccccc;
		border-radius: 6rpx;
		margin-right: #{16upx};
	}

	.icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: #{56upx};
		height: #{56upx};
	}

	.ollapse {
		height: #{106upx};
		width: #{528upx};
		position: relative;
		background-color: #fff;
	}

	.ollapse-icon {
		position: absolute;
		top: 50%;
		right: #{12upx};
		width: #{56upx};
		height: #{56upx};
		transform: translateY(-50%);
	}

	.ollapse-view {
		background-color: #fff;
		height: 546rpx;
		overflow: auto;
	}

	.ollapse-view>text {
		margin-bottom: #{20upx};
	}

	.spring-board {
		position: fixed;
		top: 88rpx;
		// left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: #{528upx};
		z-index: 1000;
		background-color: rgba(9, 186, 7, .2);
		border-bottom: 1rpx solid #cccccc;
	}

	.active {
		border: #{1rpx} solid $uni-bgcolor;
	}
</style>
